import React from 'react';
import { Row, Col, Anchor } from 'antd';
import DemissionCertSetting from './DemissionCertSetting';
import HandoverProcessSetting from './HandoverProcessSetting';
import SeverLaborSetting from './SeverLaborSetting';

const config = {
    demission: DemissionCertSetting,
    handover: HandoverProcessSetting,
    severlabor: SeverLaborSetting
};
export default function LeaveSetting() {
    const tabs = React.useMemo(
        () => [
            {
                id: 'severlabor',
                title: '解除劳动关系配置',
                CurrentView: config.severlabor
            },
            {
                id: 'handover',
                title: '交接流程设置',
                CurrentView: config.handover
            },
            {
                id: 'demission',
                title: '离职证明模板',
                CurrentView: config.demission
            }
        ],
        []
    );
    return (
        <Row gutter={24}>
            <Col span={19}>
                <div style={{ maxWidth: '1000px' }}>
                    {tabs.map(item => (
                        <item.CurrentView key={item.id} id={item.id} />
                    ))}
                </div>
            </Col>
            <Col span={4} offset={1}>
                <Anchor
                    showInkInFixed
                    targetOffset={50}
                    getContainer={() => document.getElementById('turnoverSetting').parentNode || window}
                >
                    {tabs.map(item => (
                        <Anchor.Link href={`#${item.id}`} title={item.title} key={item.id} />
                    ))}
                </Anchor>
            </Col>
        </Row>
    );
}
